<template>
  <div class="settings-page" :class="styleList">
    <SettingItem></SettingItem>
  </div>
</template>

<script>
import SettingItem from '@/components/SettingItem'
export default {
  components: {
    SettingItem
  },
  computed: {
    theme () {
      return this.$store.state.theme
    },
    isLight () {
      return this.theme === 'light'
    },
    isDark () {
      return this.theme === 'dark'
    },
    styleList () {
      return {
        'light-settings': this.isLight, 'dark-settings': this.isDark
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.settings-page {
  height: 100%;
}
</style>
